<script setup>
import { computed, ref } from "vue";
import { ElButton } from "element-plus";
import { useRouter } from "vue-router";
import { useBillStore } from "@/stores/rent-fees/billStore";

// 账单仓库
const billStore = useBillStore();

// 模拟账单数据
const bills = computed(() => billStore.billsData);

const overdueBills = computed(() =>
  bills.value.filter((item) => item.status == "已逾期")
);
const unOverdueBills = computed(() =>
  bills.value.filter((item) => item.status == "未逾期")
);

// 分页器
const totalRecords = ref(bills.value.length);
const pageSize = ref(10);
const currentPage = ref(1);

// 使用 Vue Router 进行页面跳转
const router = useRouter();

// 查看账单详情
const viewBillDetails = (bill) => {
  router.push({
    name: "账单详情",
    params: { billNumber: bill.billNumber },
  });
};
</script>

<template>
  <div class="rent-fees-management">
    <!-- 账单列表 -->
    <section class="section">
      <div class="un-overdue-bills">
        <div class="section-header">
          <h1>账单列表</h1>
        </div>
        <el-divider />

        <!-- 使用 el-table 展示账单 -->
        <el-table :data="unOverdueBills" style="width: 100%">
          <el-table-column prop="billNumber" label="账单编号" />
          <el-table-column prop="month" label="账单周期" />
          <el-table-column prop="rentFee" label="租金费用" />
          <el-table-column prop="energyFee" label="能耗费用" />
          <el-table-column prop="totalFee" label="总费用" />
          <el-table-column prop="dueDate" label="付款截止日期" />

          <!-- 操作列：查看详情按钮 -->
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="viewBillDetails(scope.row)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalRecords"
        layout="prev, pager, next, sizes"
        @size-change="pageSize = $event"
        @current-change="currentPage = $event"
      ></el-pagination>
    </section>

    <!-- 逾期提醒 -->
    <section class="section">
      <div class="overdue-bills">
        <div class="section-header">
          <h1>逾期提醒</h1>
        </div>
        <el-divider />
        <el-table :data="overdueBills" style="width: 100%">
          <el-table-column prop="billNumber" label="账单编号" />
          <el-table-column prop="month" label="账单周期" />
          <el-table-column prop="rentFee" label="租金费用" />
          <el-table-column prop="energyFee" label="能耗费用" />
          <el-table-column prop="totalFee" label="总费用" />
          <el-table-column prop="dueDate" label="付款截止日期" />

          <!-- 操作列：查看详情按钮 -->
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="viewBillDetails(scope.row)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalRecords"
        layout="prev, pager, next, sizes"
        @size-change="pageSize = $event"
        @current-change="currentPage = $event"
      ></el-pagination>
    </section>
  </div>
</template>

<style scoped lang="scss">
.rent-fees-management {
  padding: 20px;
  background-color: #f5f7fa;
}

.section {
  background: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.un-overdue-bills {
  height: 40vh;
}

.overdue-bills {
  height: 40vh;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

h2 {
  font-size: 18px;
  color: #303133;
}

.billing-info,
.payment-methods,
.overdue-info {
  padding: 15px;
  background-color: #f4f6f9;
  border-radius: 5px;
  margin-top: 10px;
}

.qr-code {
  width: 100%;
  height: auto;
}

.el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

.el-dialog .dialog-footer {
  padding: 10px 20px;
}
</style>
